<template>
      <i-sticky :scrollTop="scrollTop" i-class='i-sticky-demo'>
          <i-sticky-item v-for='(item,index) in dataList' :key='index'>
              <view slot="title" class='i-sticky-demo-title'>
                 {{item.name}}
              </view>
              <view slot="content" v-for='(child,childIndex) in item.list' :key='childIndex' @click='changeItem(child.id,child.name,item.name)'>
                  <view class="i-sticky-demo-item">{{child.name}}<i-icon v-if='child.id==selectedId' type="success" size='24' color='#2586d1' i-class='selected' /></view>
              </view>
          </i-sticky-item>
      </i-sticky>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
export default { 
  beforeMount(){
      var params = this.$root.$mp.query;
      if(params.buildingId) this.buildingId = params.buildingId;
      this.findList()
  },
  data() {
    return {
      scrollTop : 0,
      selectedId:null,
      buildingId:null,
      dataList:[]
    }
  },
  methods:{
      changeItem(id,areaName,floorName){
          this.selectedId = id; 
          this.back(areaName,floorName)
      },
      findList(){
          this.$http.post({
            url:'/project/getZones',
            data:{
                ukey:this.userInfo.ukey,
                userId:this.userInfo.userId,
                buildingId:this.buildingId
            }
          }).then((res)=>{
              if(res.s==0){
                  this.dataList = res.i.Data;
              }
          }).catch((e)=>{
              console.log('请求失败',e)
          })
      },
      back(areaName,floorName){
            let pages = getCurrentPages(); //获取当前页面pages里的所有信息。
            let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
            prevPage.setData({  // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
                areaName,
                zoneId:this.selectedId,
                faultPos:floorName+areaName
            })  
            wx.navigateBack({delta:1})
      }
  },
  computed:{
    ...mapState(['userInfo']),
  },
  onChange(event){
    console.log(event.detail,'click right menu callback data')
  },
  //页面滚动执行方式
  onPageScroll(event){
    this.scrollTop = event.scrollTop
  }
}
</script>

<style lang='less'>
    page{
        background:#eef7fd;
        height:100%;
    }
    ::-webkit-scrollbar{
        width: 0;
        height: 0;
        color: transparent;
    }
    .i-sticky-demo{
        width:100%;
        height:100%;
        background: transparent;
    }
    .i-sticky-demo-title{
        color:#4396d6;
        background:#eef7fd;
        padding: 0 20rpx;
        font-size:32rpx;
    }
    .i-sticky-demo-item{
        color:#8a8a8a;
        padding:10px;
        border-bottom: 2rpx solid #dfe3e5;
        font-size:14px;
    }
    .selected{
        float: right;
    }
</style>
